<template>
    <div>
        <h2>我的事件</h2>
        事件级别：
        <el-select v-model="serchData.eventLevel" placeholder="请选择" size="large" style="width: 240px">

            <el-option label="一般" value="1" />
            <el-option label="紧急" value="2" />
        </el-select>

        &nbsp;&nbsp;
        <el-button type="success" @click="fetchData">查询</el-button>
        <br><br>

        <el-button plain @click="dialogVisible = true, resetForm(ruleFormRef)">上报事件 </el-button>
        <br><br>

        <!--显示列表-->
        <el-table :data="tableData" class="table">
            <el-table-column type="index" label="序号" width="60" align="center" :index="indexMethod" />
            <el-table-column prop="incidentDescription" label="事件描述" style="width: 250px;" />
            <el-table-column prop="eventType" label="事件类型" style="width: 250px;" />
            <el-table-column prop="eventSource" label="事件来源" style="width: 250px;" />
            <el-table-column prop="reportingTime" label="上报时间" style="width: 250px;">
                <template v-slot="spoce">
                    {{ spoce.row.reportingTime.substring(0,
                        10) }}&nbsp;
                </template>

            </el-table-column>
            <el-table-column prop="informant" label="上报人" style="width: 250px;" />
            <el-table-column prop="alertStatus" label="预警状态" style="width: 250px;">
                <template v-slot="scope">
                    <el-button type="success" circle v-if="scope.row.alertStatus == 0" size="small" />
                    <el-button type="danger" circle v-else size="small" />
                </template>
            </el-table-column>
            <el-table-column prop="nodeType" label="当前节点" style="width: 250px;" />
            <el-table-column label="操作" width="225">
                <template v-slot="scope">
                    <el-link type="danger" size="small"
                        @click="deleteAssessmentIndex(scope.row.id)">撤回</el-link>&nbsp;&nbsp;
                    <el-link type="success" @click="Edits(scope.row.id)">查看</el-link>&nbsp;
                </template>
            </el-table-column>
        </el-table>
        <!--分页-->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageIndex"
            :page-sizes="[15, 20, 25, 30]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
            :total="totalCount" class="pagination"></el-pagination>

        <!--弹出框新增-->
        <el-dialog v-model="dialogVisible" title="上报事件" style="width: 1000px;">
            <span>
                <h3>举报信息</h3>
                <el-form ref="ruleFormRef" style="width: 1800px" :model="RuleForm" :rules="rules" label-width="auto"
                    class="demo-ruleForm" status-icon>

                    <el-row :gutter="20">
                        <el-col :span="6">
                            <el-form-item label="事件来源" prop="eventSource">
                                <el-select v-model="RuleForm.eventSource" placeholder="请选择事件来源">
                                    <el-option label="网格员上报" value="网格员上报" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="上报人" prop="informant">
                                <el-input v-model="RuleForm.informant" />
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row :gutter="20">
                        <el-col :span="6">
                            <el-form-item label="联系电话" prop="phone">
                                <el-input v-model="RuleForm.phone" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="上报时间" prop="reportingTime">
                                <el-date-picker v-model="RuleForm.reportingTime" type="date" style="width: 100%" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <h3>事件信息</h3>

                    <el-row :gutter="20">
                        <el-col :span="6">
                            <el-form-item label="事件描述" prop="incidentDescription">
                                <el-input v-model="RuleForm.incidentDescription" type="textarea" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="事件级别" prop="eventLevel">
                                <el-radio-group v-model="RuleForm.eventLevel">
                                    <el-radio :value="1">一般</el-radio>
                                    <el-radio :value="2">紧急</el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item label="是否在地图内" prop="map">
                                <el-radio-group v-model="RuleForm.map">
                                    <el-radio :value="1">是</el-radio>
                                    <el-radio :value="2">否</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row :gutter="20">
                        <el-col :span="6">
                            <el-form-item label="位置描述" prop="locationDescription">
                                <el-input v-model="RuleForm.locationDescription" type="textarea" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="事件座标" prop="eventCoordinate">
                                <el-input v-model="RuleForm.eventCoordinate" />
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row :gutter="20">
                        <el-col :span="6">
                            <el-form-item label="事件类型" prop="eventType">
                                <el-select v-model="RuleForm.eventType" placeholder="请选择事件类型">
                                    <el-option label="事件" value="事件" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="所属网格" prop="owningGrid">
                                <el-input v-model="RuleForm.owningGrid" disabled />
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row :gutter="20">
                        <el-col :span="6">
                            <el-form-item label="选择行业" prop="industryType">
                                <el-select v-model="RuleForm.industryType" placeholder="请选择行业">
                                    <el-option v-for="option in options" :key="option.value" :label="option.txt"
                                        :value="option.value" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row :gutter="20">
                        <el-col :span="6">
                            <el-form-item label="选择大类" prop="selectiveCategory">
                                <el-select style="width: 150px;" v-model="RuleForm.selectiveCategory"
                                    placeholder="请选择大类">
                                    <el-option label="事件" value="事件" />
                                </el-select>
                            </el-form-item>
                            <el-form-item label="选择小类" prop="selectiveSubclass">
                                <el-select v-model="RuleForm.selectiveSubclass" placeholder="请选择小类">
                                    <el-option v-for="option in options3" :key="option.value" :label="option.label"
                                        :value="option.value" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="下一节点" prop="nodeId">
                                <el-select v-model="RuleForm.nodeId" placeholder="请选择下一节点">
                                    <el-option v-for="option in ShuTrrList" :key="option.value" :label="option.txt"
                                        :value="option.value" />
                                </el-select>
                            </el-form-item>
                            <el-form-item label="流转意见" prop="circulatingOpinions">
                                <el-input v-model="RuleForm.circulatingOpinions" type="textarea" />
                            </el-form-item>

                        </el-col>
                    </el-row>
                    <el-form-item label="上传附件" prop="uploadAttachments">
                        <el-upload class="avatar-uploader"
                            action="http://10.31.60.18:8000/GriddingSetsRout/api/File/UploadFile"
                            :show-file-list="false" :on-success="handleAvatarSuccess">
                            <img v-if="RuleForm.uploadAttachments"
                                :src="RuleForm.uploadAttachments"
                                class="avatar" />
                            <el-icon v-else class="avatar-uploader-icon">
                                <Plus />
                            </el-icon>
                        </el-upload>

                    </el-form-item>

                    <el-form-item>
                        <!-- <el-button type="primary" @click="submitForm(ruleFormRef)"> 新增</el-button> -->
                        <el-button plain @click="submitForm(ruleFormRef)">新增 </el-button>
                        <el-button @click="resetForm(ruleFormRef)">重置</el-button>
                    </el-form-item>
                </el-form>
            </span>
        </el-dialog>

        <!--查看详情弹出框新增-->
        <el-dialog v-model="dialogVisible2" title="查看事件详情" style="width: 1000px;">
            <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">

                <el-tab-pane label="事件信息" name="first">
                    <span>
                        <h3>举报信息</h3>
                        <el-form ref="ruleFormRef" style="width: 1800px" :model="RuleForm" :rules="rules"
                            label-width="auto" class="demo-ruleForm" status-icon>

                            <el-row :gutter="20">
                                <el-col :span="6">
                                    <el-form-item label="事件来源" prop="eventSource">
                                        <el-select v-model="RuleForm.eventSource" placeholder="请选择事件来源">
                                            <el-option label="网格员上报" value="网格员上报" />
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="上报人" prop="informant">
                                        <el-input v-model="RuleForm.informant" />
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <el-row :gutter="20">
                                <el-col :span="6">
                                    <el-form-item label="联系电话" prop="phone">
                                        <el-input v-model="RuleForm.phone" />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="上报时间" prop="reportingTime">
                                        <el-date-picker v-model="RuleForm.reportingTime" type="date"
                                            style="width: 100%" />
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <h3>事件信息</h3>

                            <el-row :gutter="20">
                                <el-col :span="6">
                                    <el-form-item label="事件描述" prop="incidentDescription">
                                        <el-input v-model="RuleForm.incidentDescription" type="textarea" />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="事件级别" prop="eventLevel">
                                        <el-radio-group v-model="RuleForm.eventLevel">
                                            <el-radio :value="1">一般</el-radio>
                                            <el-radio :value="2">紧急</el-radio>
                                        </el-radio-group>
                                    </el-form-item>
                                    <el-form-item label="是否在地图内" prop="map">
                                        <el-radio-group v-model="RuleForm.map">
                                            <el-radio :value="1">是</el-radio>
                                            <el-radio :value="2">否</el-radio>
                                        </el-radio-group>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <el-row :gutter="20">
                                <el-col :span="6">
                                    <el-form-item label="位置描述" prop="locationDescription">
                                        <el-input v-model="RuleForm.locationDescription" type="textarea" />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="事件座标" prop="eventCoordinate">
                                        <el-input v-model="RuleForm.eventCoordinate" />
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <el-row :gutter="20">
                                <el-col :span="6">
                                    <el-form-item label="事件类型" prop="eventType">
                                        <el-select v-model="RuleForm.eventType" placeholder="请选择事件类型">
                                            <el-option label="事件" value="事件" />
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="所属网格" prop="owningGrid">
                                        <el-input v-model="RuleForm.owningGrid" disabled />
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <el-row :gutter="20">
                                <el-col :span="6">
                                    <el-form-item label="选择行业" prop="industryType">
                                        <el-select v-model="RuleForm.industryType" placeholder="请选择行业">
                                            <el-option v-for="option in options" :key="option.value" :label="option.txt"
                                                :value="option.value" />
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <el-row :gutter="20">
                                <el-col :span="6">
                                    <el-form-item label="选择大类" prop="selectiveCategory">
                                        <el-select style="width: 150px;" v-model="RuleForm.selectiveCategory"
                                            placeholder="请选择大类">
                                            <el-option label="事件" value="事件" />
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="选择小类" prop="selectiveSubclass">
                                        <el-select v-model="RuleForm.selectiveSubclass" placeholder="请选择小类">
                                            <el-option v-for="option in options3" :key="option.value"
                                                :label="option.label" :value="option.value" />
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="下一节点" prop="nodeId">
                                        <el-select v-model="RuleForm.nodeId" placeholder="请选择下一节点">
                                            <el-option v-for="option in ShuTrrList" :key="option.value"
                                                :label="option.txt" :value="option.value" />
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="流转意见" prop="circulatingOpinions">
                                        <el-input v-model="RuleForm.circulatingOpinions" type="textarea" />
                                    </el-form-item>

                                </el-col>
                            </el-row>
                            <el-form-item label="上传附件" prop="uploadAttachments">
                                <el-upload class="avatar-uploader"
                                    action="http://10.31.60.18:8000/GriddingSetsRout/api/File/UploadFile"
                                    :show-file-list="false" :on-success="handleAvatarSuccess">
                                    <img v-if="RuleForm.uploadAttachments"
                                        :src="RuleForm.uploadAttachments"
                                        class="avatar" />
                                    <el-icon v-else class="avatar-uploader-icon">
                                        <Plus />
                                    </el-icon>
                                </el-upload>

                            </el-form-item>


                        </el-form>
                    </span>
                </el-tab-pane>

                <el-tab-pane label="督办信息" name="second">
                    <span>
                        <el-form :model="form" label-width="auto">
                            <el-form-item label="督办单位" prop="supervisingUnit">
                                <el-input v-model="form.supervisingUnit" style="height: 50px; width: 250px;" />
                            </el-form-item>
                        </el-form>
                        <el-form :model="form" label-width="auto">
                            <el-form-item label="督办意见" prop="supervisingOpinion">
                                <el-input v-model="form.supervisingOpinion" style="height: 50px; width: 250px;" />
                            </el-form-item>
                        </el-form>
                        <h3>回复信息</h3><br /><br />
                        <el-form :model="form" label-width="auto">
                            <el-form-item label="回复督办" prop="supervisingReply">
                                <el-input v-model="form.supervisingReply" style="height: 50px; width: 250px;" />
                            </el-form-item>
                        </el-form>
                    </span>
                </el-tab-pane>

            </el-tabs>

        </el-dialog>

    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue'

import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'
import axios from 'axios'
import { useRouter } from 'vue-router'
const router = useRouter()
import type { TabsPaneContext } from 'element-plus'

const activeName = ref('first')

const handleClick = (tab: TabsPaneContext, event: Event) => {
    console.log(tab, event)
}
//关于查询条件的
const serchData = reactive({
    eventLevel: ''
})
//关于分页
const tableData = ref([])
const pageIndex = ref(1)
const pageSize = ref(15)
const totalCount = ref(0)
// 序号
const indexMethod = (index: number) => {
    return index += (pageSize.value) * (pageIndex.value - 1) + 1;
}

//关于弹出框
const dialogVisible = ref(false)
//关于查看详情的弹出框
//关于弹出框
const dialogVisible2 = ref(false)
//显示列表
const fetchData = async () => {
    try {
        const response = await axios.get('http://47.95.178.186:8000/IncidentGetRout/api/FormManagementRead/ShowMyEvent', {
            params: {
                PageIndex: pageIndex.value,
                PageSize: pageSize.value,
                eventLevel: serchData.eventLevel || 0,

            }
        })

        tableData.value = response.data.data
        totalCount.value = response.data.totalCount
    } catch (error) {
        console.error(error)
    }
}
//分页
const handleSizeChange = (val: number) => {
    pageSize.value = val
    fetchData()
}
//分页
const handleCurrentChange = (val: number) => {
    pageIndex.value = val
    fetchData()
}
//文件上传
const handleAvatarSuccess = (res: string) => {
    RuleForm.uploadAttachments = res;
    console.log(RuleForm.uploadAttachments);
}
//行业下拉框
interface Ioption {
    txt: string
    value: number
}
//行业下拉框数组
const options = ref<Ioption[]>([])
//绑定行业下拉框
const fetchOptions = async () => {
    try {
        const response = await axios.get('http://47.95.178.186:8000/IncidentGetRout/api/FormManagementRead/zhuanSheepBreed')
        // 将后端返回的选项数据保存到 options 中
        options.value = response.data
    } catch (error) {
        console.error('获取下拉框选项失败:', error)
    }
}
//下一节点下拉框
const ShuTrrList = ref<{
    value: number,
    txt: string
}[]>([]);
const BindNode = () => {
    axios.get("http://47.95.178.186:8000/IncidentGetRout/api/FormManagementRead/BindNode").then(res => {
        ShuTrrList.value = res.data;
        console.log(ShuTrrList.value);
    })
}
interface Ioption {
    label: string,
    value: number,
}
const options3 = ref<Ioption[]>([])
//绑定小类下拉框
const BindSubclasses = async () => {
    try {
        const response = await axios.get('http://47.95.178.186:8000/GetLiGriddingRout/api/AssemType/ShowTreeInfo')
        // 将后端返回的选项数据保存到 options 中
        options3.value = response.data
    } catch (error) {
        console.error('获取下拉框选项失败:', error)
    }
}

//获取表单中的信息
const RuleForm = reactive({
    id: 0,
    eventSource: '',
    informant: '',
    phone: '',
    reportingTime: '',
    incidentDescription: '',
    eventLevel: '',
    map: '',
    locationDescription: '',
    eventCoordinate: '',
    eventType: '',
    owningGrid: '三级网格',
    industryType: '',
    selectiveCategory: '',
    selectiveSubclass: '',
    uploadAttachments: '',
    nodeId: '',
    circulatingOpinions: '',
    eventCategory: 0,
})
const ruleFormRef = ref<FormInstance>()

//验证
const rules = reactive<FormRules>({
    eventSource: [
        { required: true, message: '事件来源不能为空', trigger: 'change' },
    ],
    informant: [
        { required: true, message: '上报人不能为空', trigger: 'blur' },
    ],
    phone: [
        { required: true, message: '联系电话不能为空', trigger: 'blur' },
    ],
    reportingTime: [
        { type: 'date', required: true, message: '上报时间不能为空', trigger: 'change' },
    ],
    incidentDescription: [
        { required: true, message: '事件描述不能为空', trigger: 'blur' },
    ],
    eventLevel: [
        { required: true, message: '事件级别不能为空', trigger: 'change' },
    ],
    map: [
        { required: true, message: '是否在地图内不能为空', trigger: 'change' },
    ],
    locationDescription: [
        { required: true, message: '位置描述不能为空', trigger: 'blur' },
    ],
    eventCoordinate: [
        { required: true, message: '事件座标不能为空', trigger: 'blur' },
    ],
    eventType: [
        { required: true, message: '事件类型不能为空', trigger: 'change' },
    ],
    owningGrid: [
        { required: true, message: '所属网格不能为空', trigger: 'blur' },
    ],
    industryType: [
        { required: true, message: '行业类型不能为空', trigger: 'change' },
    ],
    selectiveCategory: [
        { required: true, message: '大类不能为空', trigger: 'change' },
    ],
    selectiveSubclass: [
        { required: true, message: '小类不能为空', trigger: 'change' },
    ],
    uploadAttachments: [
        { required: true, message: '上传附件不能为空', trigger: 'change' },
    ],
    nodeId: [
        { required: true, message: '下一节点不能为空', trigger: 'change' },
    ],
    circulatingOpinions: [
        { required: true, message: '流转意见不能为空', trigger: 'blur' },
    ],

})

const zaoqianan = reactive({
    aaa: 0
})

//新增功能
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log(valid)
            if (RuleForm.incidentDescription == "代办事件") {
                zaoqianan.aaa = 1
            }
            else if (RuleForm.incidentDescription == "结案事件") {
                zaoqianan.aaa = 2
            }
            else if (RuleForm.incidentDescription == "评价事件") {
                zaoqianan.aaa = 3
            }
            else if (RuleForm.incidentDescription == "关闭事件") {
                zaoqianan.aaa = 4
            }
            else if (RuleForm.incidentDescription == "延期审批") {
                zaoqianan.aaa = 5
            }
            else if (RuleForm.incidentDescription == "延期审批") {
                zaoqianan.aaa = 6
            }
            else if (RuleForm.incidentDescription == "督办催办") {
                zaoqianan.aaa = 7
            } else {
                zaoqianan.aaa = 0
            }

            RuleForm.eventCategory = zaoqianan.aaa
            axios.post('http://47.95.178.186:8000/IncidentSetRout/api/FormManagement/CreateEventDisposition', RuleForm)
                .then(response => {
                    if (response.data.code == 200) {
                        console.log("输入的事件描述：", RuleForm.incidentDescription);
                        // dialogVisible.value = false
                        // router.go(0)
                        ElMessage.success(response.data.msg)
                    } else {
                        // 处理新增失败情况
                        ElMessage.error(response.data.msg)
                    }
                })

        } else {
            console.log('error submit!', fields)
        }
    })
}
const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}
interface Tree {
    [key: string]: any
}
//删除指标
const deleteAssessmentIndex = (id: number) => {
    ElMessageBox.confirm(
        '确定要删除吗?',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            axios.delete('http://47.95.178.186:8000/IncidentSetRout/api/FormManagement/DeleteMyEvent?id=' + id, {
            }).then(res => {
                if (res.data.code == 200) {
                    ElMessage({
                        message: '删除成功',
                        type: 'success',
                    })
                    fetchData()
                } else {
                    ElMessage({
                        message: '删除失败',
                        type: 'error',
                    })
                }
            })
        })
}
//查看事件详情
const Edits = (id: number) => {
    dialogVisible2.value = true
    axios.get('http://47.95.178.186:8000/IncidentGetRout/api/FormManagementRead/MyEventBackfill?id=' + id, {
    }).then(res => {
        let d = res.data.result
        if (res.data.code == 200) {
            RuleForm.id = d.id
            RuleForm.eventSource = d.eventSource
            RuleForm.informant = d.informant
            RuleForm.phone = d.phone
            RuleForm.reportingTime = d.reportingTime
            RuleForm.incidentDescription = d.incidentDescription
            RuleForm.eventLevel = d.eventLevel
            RuleForm.map = d.map
            RuleForm.locationDescription = d.locationDescription
            RuleForm.eventCoordinate = d.eventCoordinate
            RuleForm.eventType = d.eventType
            RuleForm.owningGrid = d.owningGrid
            RuleForm.industryType = d.industryType
            RuleForm.selectiveCategory = d.selectiveCategory
            RuleForm.selectiveSubclass = d.selectiveSubclass
            RuleForm.uploadAttachments = d.uploadAttachments
            console.log(RuleForm.uploadAttachments)
            console.log(d.uploadAttachments)
            RuleForm.nodeId = d.nodeId
            RuleForm.circulatingOpinions = d.circulatingOpinions

        }
    })
}
//获取查看详情表单中的信息
const form = reactive({
    supervisingUnit: '',
    supervisingOpinion: '',
    supervisingReply: '',
})

onMounted(() => {
    //调用行业下拉框方法
    fetchOptions();
    //绑定下一节点
    setTimeout(() => {
        BindNode()
    }, 300);
    //绑定小类
    BindSubclasses();
    //调用显示方法
    fetchData();
})



</script>

<style scoped>
.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}
</style>
